<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<title>车辆轨迹查询</title>
	</head>
	<link rel="stylesheet" type="text/css" href="./libs/element-ui@2.15.14/index.css" />
	<link rel="stylesheet" type="text/css" href="./libs/openlayers/index.css" />
	<link rel="stylesheet" type="text/css" href="./index.css" />
	<body>
		<section id="app" v-loading="loading">
			<!-- 查询区域 -->
			<el-form class="search-form" inline :model="search" size="mini">
				<el-form-item label="车牌号">
					<el-input v-model="search.headLicensePlateNo" style="width: 140px" clearable placeholder="车牌号"></el-input>
				</el-form-item>
				<el-form-item label="车牌颜色">
					<el-select v-model="search.plateColor" placeholder="车牌颜色" style="width: 100px">
						<el-option v-for="item,idx in plateColors" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间范围">
					<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
						end-placeholder="结束时间" @change="timeRangeChange">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="serachBtnClick">轨迹查询</el-button>
				</el-form-item>
			</el-form>
			<!-- 地图区域 -->
			<div id="map"></div>
			<div class="paly-btn-group">
				<el-button class="paly-btn" type="primary" @click="palyTrackTrans">播放</el-button>
				<el-button-group>
					<el-button :type="palySpeed==1?'warning':'primary'" @click="palySpeed=1">1x</el-button>
					<el-button :type="palySpeed==5?'warning':'primary'" @click="palySpeed=5">5x</el-button>
					<el-button :type="palySpeed==10?'warning':'primary'" @click="palySpeed=10">10x</el-button>
					<el-button :type="palySpeed==20?'warning':'primary'" @click="palySpeed=20">20x</el-button>
					<el-button :type="palySpeed==50?'warning':'primary'" @click="palySpeed=50">50x</el-button>
				</el-button-group>
			</div>
			<el-popover placement="bottom" width="400" trigger="click">
				<el-table :data="warningData" stripe size="small" max-height="500px" :loading="tableLoading">
					<el-table-column width="100" property="warningTime" label="告警时间"></el-table-column>
					<el-table-column width="100" property="warningTypeName" label="异常类型"></el-table-column>
					<el-table-column width="300" property="addressDetail" label="位置"></el-table-column>
					<el-table-column width="100" property="warningStartTime" label="开始时间"></el-table-column>
					<el-table-column width="100" property="warningEndTime" label="结束时间"></el-table-column>
				</el-table>
				<el-button class="tablePopBtn" slot="reference" type="primary">车辆告警列表</el-button>
			</el-popover>
		</section>
	</body>
	<script type="text/javascript" src="./utils/index.js"></script>
	<script type="text/javascript" src="./libs/openlayers/index.js"></script>
	<script type="text/javascript" src="./libs/proj4.js"></script>
	<script type="text/javascript" src="./libs/axios.min.js"></script>
	<script type="text/javascript" src="./libs/vue.min.js"></script>
	<script type="text/javascript" src="./libs/element-ui@2.15.14/index.js"></script>
	<script type="text/javascript" src="./map.hook.js"></script>
	<script type="text/javascript" src="./index.js"></script>
</html>